<template>
  <div class="lee-local">
    <LeeBanner class="lee-local-banner" :images="images" />
    <div ref="box" class="lee-box">
      <h2>{{ $store.getters.lang[0] }}</h2>
      <p>{{ $store.getters.lang[1] }}</p>
      <p>{{ $store.getters.lang[2] }}</p>
      <p>{{ $store.getters.lang[3] }}</p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'LeeSectionOne',
  data() {
    return {};
  },
  computed: {

    ...mapGetters({
      images: 'bannerImages',
    }),
  },
};
</script>

<style lang="less" scoped>
.lee-local {
  position: relative;

  &-banner {
    filter: brightness(.6);
  }
}

.lee-box {
  @w: 700/16em;
  @h: 280/16em;
  width: @w;
  height: @h;
  position: absolute;
  top: calc(~"50% - "@h/2);
  left: calc(~"50% - "@w/2);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  font-family: lishu;
  border-radius: 10px;
  transition: box-shadow .5s;

  h2 {
    font-size: 70/16em;
    margin: 0;
  }

  p {
    margin: 8/16em 0 0;
    font-size: 20/16em;
    letter-spacing: 2/16em;
  }

  &:hover,
  .lee-local:hover > & {
    box-shadow: 0 0 70px #eee;
  }
}
</style>
